<template>
  <!-- <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta> -->
  <scroll-view class="order-list" scroll-y>
    <view class="order-item" v-for="order in orderList" :key="order.id">
      <!-- 订单头部 -->
      <view class="order-header">
        <text class="order-no">订单号：{{ order.id }}</text>
        <text class="status">{{ statusMap[order.status] }}</text>
      </view>

      <!-- 商品信息 -->
      <view
        class="goods-item"
        v-for="item in order.order_item_list"
        :key="goods.id"
        @click="gotoPayment(order.payment_id)"
      >
        <image :src="item.goods_info.cover_url" class="goods-image" />
        <view class="goods-info">
          <text class="name">{{ item.goods_info.name }}</text>
          <view class="spec">规格：{{ item.goods_param.name }}</view>
          <view class="price-box">
            <text class="price">￥{{ item.goods_param.price }}</text>
            <text class="count">x{{ item.count }}</text>
          </view>
        </view>
      </view>
      <!-- 订单底部 -->
      <view class="order-footer">
        <text class="total">共{{ order.order_item_list.length }}件 合计：￥{{ order.real_price }}</text>
        <view class="action-box">
          <template v-if="order.status === status.NotPaid.key">
            <view class="btn secondary" @click="cancelOrder(order.id, order.status)">取消订单</view>
            <!-- <view class="btn secondary" @click="editAddress(order.id)">修改地址</view> -->
            <view class="btn primary" @click="goPayment(order.id, order.status)">立即支付</view>
          </template>
          <template v-if="order.status === status.Shipped.key">
            <view class="btn primary" @click="confirmReceipt(order.id, order.status)">确认收货</view>
          </template>
          <template v-if="order.status === status.SignedFor.key">
            <view class="btn primary" @click="writeComment(order)">去评价</view>
          </template>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    orderType: {
      type: Number,
      default: 0 //0-待付款 1-待发货 2-待收货 3-待评价  4-全部
    },
    order: {
      type: Array,
      default: []
    },
    status: {
      type: Object
    }
  },

  data() {
    return {
      show: true,
      commentFormData: {
        score: 0,
        comment: '',
        goods_id: '',
        order_item_id: ''
      }
    }
  },

  computed: {
    orderList() {
      // for (let item = 0; item < this.order.length; item++) {
      //   // 添加一共扩展属性
      //   this.order[item].spread = false
      // }

      // console.log(this.order)
      return this.order
    },
    statusMap() {
      let m = {}
      for (const key in this.status) {
        if (Object.prototype.hasOwnProperty.call(this.status, key)) {
          const element = this.status[key]
          m[element.key] = element.name
        }
      }

      // console.log(m)
      return m
    }
  },

  created() {},

  methods: {
    goPayment(id, status) {
      uni.showModal({
        title: '提示',
        content: '模拟支付',
        success: async (res) => {
          if (res.confirm) {
            const { data: res } = await uni.request({
              url: this.$domain.data + '/pay/' + id,
              header: getApp().globalData.header,
              method: 'POST'
            })

            if (res.status != 200) {
              uni.showToast({
                icon: 'error',
                title: '支付失败'
              })
              return
            }

            setTimeout(() => {
              uni.showToast({
                icon: 'success',
                title: '支付成功'
              })
            }, 500)

            this.$emit('pay', {
              status: status
            })
          }
        }
      })
    },
    cancelOrder(id, status) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？（取消后返还已经使用的优惠券）',
        success: async (res) => {
          // 调用取消接口

          if (res.confirm) {
            const { data: res } = await uni.request({
              url: this.$domain.data + '/cancelOrder/' + id,
              method: 'POST'
            })

            if (res.status != 200) {
              uni.showToast({
                icon: 'none',
                title: '取消失败，服务器出错'
              })
              return
            }

            setTimeout(() => {
              uni.showToast({
                icon: 'success',
                title: '取消成功'
              })
            }, 500)

            this.$emit('cancel', {
              status: status
            })
          }
        }
      })
    },
    confirmReceipt(id, status) {
      uni.showModal({
        title: '提示',
        content: '请确认已收到商品',
        success: async (res) => {
          // 调用确认收货接口
          if (res.confirm) {
            const { data: res } = await uni.request({
              url: this.$domain.data + '/signedForOrder/' + id,
              method: 'POST'
            })

            if (res.status != 200) {
              uni.showToast({
                icon: 'none',
                title: '签收失败，服务器出错'
              })
              return
            }

            setTimeout(() => {
              uni.showToast({
                icon: 'success',
                title: '签收成功'
              })
            }, 500)

            this.$emit('change', {
              status: status
            })
          }
        }
      })
    },
    writeComment(order) {
      uni.navigateTo({
        url: '/pages/order/orderComments?order=' + JSON.stringify(order)
      })
    },

    handleSubmitComment() {
      console.log(this.commentFormData)
    },
    gotoPayment(id) {
      getApp().globalData.payId = id
      if (id == 0) {
      } else {
        uni.navigateTo({
          url: '/pages/pay/paysuccess?flag=false'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$def-bg-color: #f1f5f8;

.order-list {
  height: calc(100vh - 100upx);
  box-sizing: border-box;
  padding: 20upx;

  background-color: $def-bg-color;

  .order-item {
    background: #fff;
    border-radius: 16upx;
    margin-bottom: 20upx;
    padding: 30upx;
    box-sizing: border-box;

    .order-header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 30upx;
      border-bottom: 1upx solid #eee;

      .order-no {
        color: #666;
        font-size: 26upx;
      }

      .status {
        color: #f60;
        font-size: 28upx;
      }
    }

    .goods-item {
      display: flex;
      padding: 30upx 0;
      border-bottom: 1upx solid #eee;

      .goods-image {
        width: 160upx;
        height: 160upx;
        border-radius: 8upx;
        margin-right: 20upx;
        // background-color: #007aff;
      }

      .goods-info {
        flex: 1;

        .name {
          font-size: 30upx;
          color: #333;
        }

        .spec {
          color: #999;
          font-size: 24upx;
          margin: 10upx 0;
        }

        .price-box {
          display: flex;
          justify-content: space-between;

          .price {
            color: #f60;
            font-size: 28upx;
          }

          .count {
            color: #666;
          }
        }
      }
    }

    .order-footer {
      padding-top: 30upx;
      text-align: right;

      .total {
        text-align: right;
        font-size: 28upx;
        color: #333;
        margin-bottom: 30upx;
      }

      .action-box {
        margin-top: 20upx;
        display: flex;
        justify-content: flex-end;
        gap: 20upx;

        .btn {
          font-size: 30upx;
          border-radius: 10upx;
          // background-color: #666;
          padding: 10upx 30upx;
        }

        .secondary {
          background-color: $def-bg-color;
        }

        .primary {
          font-weight: 900;
          background-color: #ffeee4;
          color: #f27f32;
        }
      }
    }
  }
}
</style>
